<template>
  <el-form ref="ruleFormRef" label-width="120px" class="demo-ruleForm" :rules="rules" status-icon>
    <el-form-item label="数据来源：" prop="dataSource">
      <el-radio-group v-model="tabPosition">
        <el-radio-button label="local">上传文件</el-radio-button>
        <el-radio-button label="link">其他渠道上传</el-radio-button>
        <el-tooltip class="box-item" effect="light " content="仅支持图片、时序数据格式的数据" placement="right-start"
          v-if="tabPosition == 'link'">
          <el-button
            style="transform: scale(.8);transform-origin:left ; margin:0 0 0 10px; font-size: 18px;color: #333;border-color: #333;"
            size="small" circle>?
          </el-button>
        </el-tooltip>
      </el-radio-group>

    </el-form-item>
    <el-form-item label="标注内容：" class="labelContent" v-show="tabPosition == 'local'">
      <el-tabs :tab-position="tabPosition" style="" class="demo-tabs">
        <div class="row labelTypeBox">
          <box-loading v-if="boxLoadState"></box-loading>
          <el-upload class="upload-demo uploadBox" drag :http-request="uploadFile" :file-list="uploadFileList"
            accept=".jpg,.png,.gif,.bmp,.svg,.webp,.jpeg,.txt,.csv,.tsv,.json,.zip,.rar" multiple
            :on-change="handleFileChanged" :before-upload="checkFileType" :on-remove="removeListData">
            <div class="el-upload__text uploadBoxBtn">
              <el-image :src="imgUrl" fit />
              <el-button type="primary">上传文件</el-button>
              <div>点击上传文件按钮，或拖拽文件到这里</div>
              <div>支持上传文件格式：{{ fileType }}</div>
            </div>
            <!-- <template #tip>
              <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
              </div>
            </template> -->
          </el-upload>
        </div>
      </el-tabs>
    </el-form-item>
    <el-form-item label="链接地址：" v-show="tabPosition == 'link'" style="position: relative;">
      <el-input v-model.trim="adress" placeholder="请输入URL" @blur="uploadFile" @keyup.enter="uploadFile"
        style="width: 205px;" />
      <q-circular-progress v-if="checkState" rounded indeterminate size="23px" color="primary" class="q-ma-md"
        style="position: absolute;margin-left: 220px;" />
    </el-form-item>
    <el-form-item label="事件通知：">
      <el-switch v-model="delivery" />
      <el-tooltip class="box-item" effect="light " content="配置该选项后发生特定事件（如作业状态变化或者疑似卡死）后会发送通知至消息中心"
        placement="right-start">
        <el-button
          style="transform: scale(.8);transform-origin:left ; margin:0 0 0 10px; font-size: 18px;color: #333;border-color: #333;"
          size="small" circle>?
        </el-button>
      </el-tooltip>
    </el-form-item>
    <!-- 暂时不显示 -->
    <!-- <el-form-item label="数据状态：">
      <el-radio-group v-model="labelSate" class="ml-4" style="margin-top: -5px;">
        <el-radio label="false" size="large">无标注信息</el-radio>
        <el-radio label="true" size="large">有标注信息</el-radio>
      </el-radio-group>
    </el-form-item> -->
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, shallowRef, watch } from "vue"
import type { FormRules } from 'element-plus'
import { uploadFileApi } from 'src/api/common'
import imgUrl from 'assets/dataSet/upload.png'
import { dataSetStore } from 'src/stores/dataSet';
import { ElMessage } from 'element-plus'
import boxLoading from 'src/components/boxLoading.vue';
const dataSetObj = dataSetStore()
const uploadFileList: any = ref([])
const fileType = ref()
const tabPosition = ref('local')
const labelSate = ref('false')
const delivery = ref(false)
const adress = ref('')
const checkState = ref(false)
const rules = reactive<FormRules>({
  dataSource: [
    { required: true, message: '请选择上传文件', trigger: 'blur' }
  ],
  labelScene: [
    {
      required: true, message: '', trigger: 'blur'
    }
  ],
  desc: [
    { required: false, message: '', trigger: 'blur' },
  ],
  formRadio: [
    { required: true, message: '请选择标注类型', trigger: 'blur' },
  ],
})
const uploadForm = shallowRef({
  choices: [],
  is_labeled: '',
  import_mode: '',
  fileUpload: true
})
const paramObj = shallowRef()
const boxLoadState = ref(false)
function uploadFile(obj: any) {
  uploadForm.value.is_labeled = labelSate.value
  uploadForm.value.import_mode = tabPosition.value
  if (uploadForm.value.import_mode == 'local') {
    paramObj.value = new FormData()
    // paramObj.value.append("file", obj.file);
    paramObj.value.append("file", obj.file.name);
  } else {
    let obj = {
      url: adress.value
    }
    paramObj.value = obj
  }
  checkState.value = true
  boxLoadState.value = true
  uploadFileApi(paramObj.value).then((res) => {
    uploadFileList.value.push(res.data)
    emitFun()
    checkState.value = false
    boxLoadState.value = false
  })
}

watch(labelSate, (newdata, olddata) => {
  uploadForm.value.is_labeled = labelSate.value
  emitFun()
})

watch(boxLoadState, (newdata, olddata) => {
  uploadForm.value.fileUpload = boxLoadState.value
  emitFun()
})

const emits = defineEmits(['formData'])

function emitFun() {
  uploadForm.value.choices = uploadFileList.value
  emits('formData', uploadForm)
}

onMounted(() => {
  dataSetObj.fileType((dataSetObj.createDataSetObj as any).data_format + ',zip,rar')
  fileType.value = dataSetObj.fileTypeStore
})

const handleFileChanged = (file: any, fileList: any) => {
  // 检查是否有重复文件
  if (fileList.findIndex((f: any) => f.name === file.name) != fileList.findLastIndex((f: any) => f.name === file.name)) {
    ElMessage.error(file.name + "该文件已存在")
    fileList.pop()
    uploadFileList.value.pop()
  }
}
function checkFileType(file: any, fileList: any) {
  const fileName = file.name;
  const fileTypeName = fileName.substring(fileName.lastIndexOf(".") + 1);
  const isFileType = fileType.value.includes(fileTypeName)
  if (isFileType == false) {
    ElMessage.error(`上传类型错误，请选择${fileType.value}格式文件`);
    fileList.pop()
  }
  let isLt2k = (file.size / 1024) / 1024 / 1024 < 2 ? '1' : '0';
  if (isLt2k == '0') {
    ElMessage.error(`上传文件过大，请选择小于2G的文件`);
    fileList.pop()
  }
}
// 删除上传文件列表的某个值
function removeListData(file: any, fileList: any) {
  let filterArrIndex = uploadFileList.value.findIndex((item: any) => {
    return (item.file).indexOf(file.name) > -1
  })
  uploadFileList.value.splice(filterArrIndex, 1)
  emitFun()
}
</script>

<style scoped lang="scss">
.labelContent {

  &::v-deep .el-form-item__label {
    visibility: hidden;
  }

  .oterFromBox {
    margin-left: -40px;

    .el-form-item {
      margin-bottom: 10px;
    }

    &::v-deep .el-form-item__label {
      visibility: initial;
    }

  }

  &::v-deep .el-upload-list {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      width: 5px;
    }

    &::-webkit-scrollbar-track {
      background: rgb(206, 206, 206);
      border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgb(95, 107, 213);
      border-radius: 10px;
    }
  }

  .uploadBox {
    .uploadBoxBtn {
      text-align: center;

      .el-image {
        width: 56px;
        height: 56px;
        display: block;
        margin: 0 auto;
      }

      div {
        font-size: 12px;
        height: 20px;
      }

    }
  }
}

.bgBox {
  width: 100%;
  height: 95%;
  position: absolute;
  background: rgb(255 255 255 / 60%);
  display: flex;
  top: 0;
  left: 0;
  z-index: 2;
  justify-content: center;
  align-items: end;
}
</style>
